<template>
  <div>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog v-model="open" :title="title" :close-on-click-modal='false' width="750px" append-to-body>
	  
	  <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="账号名称" prop="account">
              <el-input v-model="form.account" placeholder="请输入账号名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录名称" prop="username">
              <el-input v-model="form.username" placeholder="请输入登录名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入登录密码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="deptId">
              <el-select v-model="form.deptId" filterable placeholder="部门" :popper-append-to-body="false" style="width: 100%">
                <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
		  <el-col :span="24">
            <el-form-item :span="24" label="角色" prop="roleIdList">
			  <el-select v-model="form.roleIdList" multiple placeholder="角色" :popper-append-to-body="false" style="width: 100%">
				<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
				</el-option>
			  </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
	  
	  <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm()">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
	 
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick, toRef } from "vue";
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from "element-plus";

// 表单实例
const userFormRef = ref();
// 是否打开弹出框
const open = ref(false);
// 弹出框标题
const title = ref("");
// 提交表单数据
let form = toRef(
  reactive({
    id: "",
    deptId: "",
    account: "",
    username: "",
    password: "",
    mobile: "",
    email: "",
	roleIdList: []
  })
);

// 表单验证
const rules = ref({
  account: [{ required: true, message: "账号名称不能为空", trigger: "blur" }],
  username: [{ required: true, message: "登录名称不能为空", trigger: "blur" }],
  password: [{ required: true, message: "登录密码不能为空", trigger: "blur" }],
  mobile: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
  email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
  deptId: [{ required: true, message: "部门不能为空", trigger: "blur" }]
});

// 部门列表
const deptList = ref<any[]>();

// 角色列表
const roleList = ref<any[]>();


const emit = defineEmits(["callBack"]);//声明事件(父级页面上添加的 @监听事件)

//父调子的子
const addFormShow = (titleName: string) => {   
  open.value = true;
  title.value = titleName; 
  reset();
};


/**
 * 表单重置
 */
function reset() {
  form.value = {
    id: "",
    deptId: "",
    account: "",
    username: "",
    password: "",
    mobile: "",
    email: "",
	roleIdList: []
  };

  nextTick(() => {
    formRef.value?.resetFields();
  });
}

//定义类型
interface User {
  id: string
  deptId: string
  account: string
  username: string
  password: string
  mobile: string
  email: string
  roleIdList: []
};

//父调子的子
const updateFormShow = (titleName: string, row: User) => {
  open.value = true;
  title.value = titleName; 
  reset();
  baseService.get(`/system/user/info/${row.id}`).then((res) => {
    if (res.code === 200) {
      form.value = res.data;
    }
  });	
};
  
/**
 * 提交按钮
 */
const submitForm = async() => {
  userFormRef.value.validate((valid: boolean) => {
    if (!valid) return;
    baseService.post(`/system/user/save`, form.value).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg);
        open.value = false;
        emit("callBack");
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
};

/**
 * 查询部门列表
 */
const getDeptList = () => {
  baseService.get("/system/dept/deptList").then((res) => {
    if (res.code === 200) {
      deptList.value = res.data;
    }
  });
};

/**
 * 查询角色列表
 */
const getRoleList = () => {
  baseService.get("/system/role/roleList").then((res) => {
    if (res.code === 200) {
      roleList.value = res.data;
    }
  });
};

defineExpose({
  addFormShow,
  updateFormShow
}) //将子组件方法暴露出来，让父组件调用

getDeptList();
getRoleList();
</script>

<style scoped></style>
